<template>
  <div>
    <div style="background-color:#fff">
      <div class="div" :style="{height: initDivHeight}">
        <img class="background-image" :src="courseInfo.imgUrl">
      </div>
      <div><img class="titles" :style="{width: initTitlesWidth,height:initTitlesHeight,top: initTitlesTop,left: initTitlesLeft,right: initTitlesRight,fontSize: initTitleFontSize}" :src="courseInfo.imgUrl"></div>
      <div class="title-font" :style="{marginLeft: initTitleMarginLeft,fontSize: initTitleFontSize,top: initTitleTop}">{{courseInfo.name}}</div>
      <div class="head-div" :style="{marginLeft: initHeadImageMarginLeft,marginTop: initHdDivMarginTop}">
        <img class="head-image" :src="courseInfo.lecturerImg" :style="{height: initHdImgHeight,width: initHdImgHeight}">
        <div class="head-image-message" :style="{height: initHdImgHeight,lineHeight: initHdImgHeight,fontSize: initHeadImageMessageFontSize,paddingLeft: initHeadImageMessagePaddingLeft}">{{courseInfo.nickName}}</div>
      </div>
      <div v-if="(courseInfo.status !== 2)"  class="isStartFont-color head-isBegin" :style="{width: initHeadIsbeginwidth,height: initHeadIsbeginHeight,fontSize: initHeadIsBeginFontSize,marginRight: initHeadIsBeginMarginRight,lineHeight: initHeadIsBeginLine,borderRadius:initHeadIsBeginBorder,marginTop:initHdDivMarginTop}">
        未开始
      </div> 
      <div v-if="(courseInfo.status === 2)" class="isEndFont-color head-isBegin" :style="{width: initHeadIsbeginwidth,height: initHeadIsbeginHeight,fontSize: initHeadIsBeginFontSize,marginRight: initHeadIsBeginMarginRight,lineHeight: initHeadIsBeginLine,borderRadius:initHeadIsBeginBorder,marginTop:initHdDivMarginTop}">
        已结束
      </div>
      <div class="time" :style="{height: initTimeHeight,lineHeight: initTimeHeight,marginLeft: initTimeMargin,marginRight: initTimeMargin,marginTop: initTimeMarginTop,fontSize: initTimeMarginFont,borderWidth: initBorder}"><span>{{courseInfo.courseTime}}</span></div>
      <div class="home-title" :style="{height: initTimeHeight,lineHeight: initTimeHeight,marginLeft: initTimeMargin,marginRight: initTimeMargin,marginTop: initHomeTitleMarginTop,fontSize: initTimeMarginFont,borderWidth: initBorder}">{{courseInfo.address}}</div>
      <div class="lecturer-title-div" :style="{marginLeft: initHomeTitleMarginTop,marginRight: initHomeTitleMarginTop,lineHeight: initLecTilDivLine,borderWidth: initBorder}">
        <div class="lecturer-title" :style="{fontSize: initTimeMarginFont,marginTop: initTimeMargin}">讲师简介</div>
        <div class="lecturer-message" :style="{fontSize: initLectMesFont,marginTop: initTimeMargin}">{{courseInfo.lecturerMemo}}</div>
        <div style="height:30px"></div>
      </div>
      <div class="lecturer-course-div" :style="{marginLeft: initTimeMargin,marginRight: initTimeMargin,lineHeight: initLecTilDivLine}">
        <div class="lecturer-title" :style="{fontSize: initTimeMarginFont,marginTop: initTimeMargin}">课程简介</div>
        <div class="lecturerCourse-message" :style="{fontSize: initTimeMarginFont,marginTop: initTimeMargin}" v-html="courseInfo.detail">{{courseInfo.detail}}</div>
        <div style="height:30px"></div>
      </div>
    </div>
    <div class="lecturer-enroll-div" :style="{height: initLecEnrDivHeight,marginTop: initTimeMargin}">
      <div class="lecturer-enroll-title" :style="{paddingTop: initHeadIsBeginMarginRight,fontSize:initTimeMarginFont,marginTop: initTimeMargin,marginLeft: initTimeMargin,marginRight: initTimeMargin}">报名({{signNum}})</div>
      <div style="height:30px"></div>
      <div class="imgDiv" :style="{marginLeft: initHeadIsBeginMarginRight,marginRight: initHeadIsBeginMarginRight}" v-for="student in studentList" v-bind:key="student.id">
        <img class="head-big-image" :src="student.imgUrl" :style="{height: initHeadImgHeight,width: initHeadImgHeight}"> 
      </div>
    </div>
    <div v-show="courseInfo.isApplay === 0" :style="{marginBottom: initCourseMarginBottom}" @click="toApplay"><mt-button class="n-enrolled-button" type="default" :style="{height:initEnrButLine,lineHeight: initEnrButLine,fontSize: initEnrButSize}">去报名</mt-button></div>
    <div v-show="courseInfo.isApplay === 1" :style="{marginBottom: initCourseMarginBottom}"><mt-button class="n-enrolled-button" type="default" :style="{height:initEnrButLine,lineHeight: initEnrButLine,fontSize: initEnrButSize}">已报名</mt-button></div>
    <div v-show="courseInfo.status === 2" :style="{marginBottom: initCourseMarginBottom}"><mt-button class="n-enrolled-end-button" type="default" :style="{height:initEnrButLine,lineHeight: initEnrButLine,fontSize: initEnrButSize}">已结束</mt-button></div>
  </div>
</template>

<script>
  import { getSignStudents } from '@/api/student'
  import { getStudentCourseDetail, toApplay } from '@/api/course'
  import { Toast } from 'mint-ui'
  export default {
    data () {
      return {
        query: {id: this.$route.query.id},
        empNo: '',
        courseInfo: {},
        studentList: [],
        signNum: '',
        listQuery: {
          id: this.id
        }
      }
    },
    created () {
      this.signStudents()
      this.studentCourseDetail()
    },
    computed: {
      initCourseMarginBottom () {
        return this.clientWidth * 113 / 750 + 'px'
      },
      initDivHeight () {
        return this.clientWidth * 221 / 750 + 'px'
      },
      initTitlesWidth () {
        return this.clientWidth * 290 / 750 + 'px'
      },
      initTitlesHeight () {
        return this.clientWidth * 200 / 750 + 'px'
      },
      initHdImgHeight () {
        return this.clientWidth * 50 / 750 + 'px'
      },
      initTitlesTop () {
        return this.clientWidth * 100 / 750 + 'px'
      },
      initTitleTop () {
        return this.clientWidth * 130 / 750 + 'px'
      },
      initHdDivMarginTop () {
        return this.clientWidth * 34 / 750 + 'px'
      },
      initTitlesLeft () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      initTitlesRight () {
        return this.clientWidth * 10 / 750 + 'px'
      },
      initTitleFontSize () {
        return this.clientWidth * 36 / 750 + 'px'
      },
      initTitleMarginLeft () {
        return this.clientWidth * 350 / 750 + 'px'
      },
      initHeadImageMarginLeft () {
        return this.clientWidth * 350 / 750 + 'px'
      },
      initHeadImageMessageFontSize () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      initHeadIsbeginHeight () {
        return this.clientWidth * 44 / 750 + 'px'
      },
      initHeadIsbeginwidth () {
        return this.clientWidth * 105 / 750 + 'px'
      },
      initHeadImageMessagePaddingLeft () {
        return this.clientWidth * 8 / 750 + 'px'
      },
      initHeadIsBeginFontSize () {
        return this.clientWidth * 20 / 750 + 'px'
      },
      initHeadIsBeginMarginRight () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      initHeadImgHeight () {
        return this.clientWidth * 80 / 750 + 'px'
      },
      initHeadIsBeginLine () {
        return this.clientWidth * 45 / 750 + 'px'
      },
      initHeadIsBeginBorder () {
        return this.clientWidth * 5 / 750 + 'px'
      },
      initTimeHeight () {
        return this.clientWidth * 87 / 750 + 'px'
      },
      initTimeMargin () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      initTimeMarginTop () {
        return this.clientWidth * 126 / 750 + 'px'
      },
      initTimeMarginFont () {
        return this.clientWidth * 26 / 750 + 'px'
      },
      initHomeTitleMarginTop () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      initLecTilDivLine () {
        return this.clientWidth * 46 / 750 + 'px'
      },
      initLectMesFont () {
        return this.clientWidth * 24 / 750 + 'px'
      },
      initLecEnrDivHeight () {
        return this.clientWidth * 300 / 750 + 'px'
      },
      initEnrButLine () {
        return this.clientWidth * 98 / 750 + 'px'
      },
      initEnrButSize () {
        return this.clientWidth * 32 / 750 + 'px'
      },
      initBorder () {
        return this.clientWidth * 1 / 750 + 'px'
      }
    },
    methods: {
      signStudents () {
        this.listQuery.id = this.query.id
        getSignStudents(this.listQuery).then(response => {
          this.studentList = response.data
          this.signNum = response.data.length
        })
      },
      studentCourseDetail () {
        this.listQuery.id = this.query.id
        getStudentCourseDetail(this.listQuery).then(response => {
          this.courseInfo = response.data
        })
      },
      toApplay () {
        this.listQuery.id = this.query.id
        toApplay(this.listQuery).then(response => {
          if (response.data === 'SUCCESS') {
            window.location.reload()
          } else {
            let message = '报名失败！'
            if (response.data === 'APPLAY') {
              message = '您已报名'
            }
            Toast({
              message: message,
              duration: 3 * 1000
            })
          }
        })
      }
    }
}
</script>

<style>
.titles{
   position:absolute;
   color: #FFFFff;
}
.title-font{
  color: #FFFFff 100%;
  font-family: 微软雅黑;
  position: absolute;
}
.div{
  width:100%;
  overflow:hidden
}
.background-image{
  width: 100%;
  background-repeat: no-repeat;
  background-size:100% 100%;
  -webkit-filter: blur(20px); /* Chrome, Opera */
  -moz-filter: blur(20px);
  -ms-filter: blur(20px);    
  filter: blur(20px);  
  display: block; 
}
.head-image{
  border-radius:50%; 
}
.head-big-image{
  border-radius:50%; 
}
.head-div{
  float: left;
}
.head-image-message{
  float: right;
  color: #5B6175;
}
.head-isBegin{
  text-align: center;
  float: right;
}
.time{
  color: #5B6175;
  font-weight: bold;
  border-bottom:solid #5B6175;
}
.home-title{
  color: #5B6175;
  font-weight: bold;
  border-bottom:solid #5B6175;
}
.lecturer-title-div{
  border-bottom:solid #5B6175;
}
.lecturer-course-div{
}
.lecturer-title{
  font-weight: bold;
  color: #5B6175;
}
.lecturer-message{
  color: #5B6175;
  font-family: 微软雅黑;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.lecturerCourse-message{
  color: #5B6175;
  font-family: 微软雅黑;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow: hidden;
}
.lecturer-enroll-div{
  background-color: #ffffff;
}
.lecturer-enroll-title{
  font-weight: bold;
  color: #5B6175;
}
.imgDiv{
  float: left;
}

</style>


